import styles from '../styles/FindPw.css';
import React, {Component} from 'react';
import {Form, Row, Col, Icon, Layout, Input, Button} from 'antd';
let bg_register = require('../images/bg_account.jpg');
const { Footer} = Layout;
const FormItem = Form.Item;
import HeaderMin from './HeaderMin'
import FooterMin from './FooterMin'

const formItemLayout = {
  labelCol: {
    xs: {span: 24},
    sm: {span: 6},
  },
  wrapperCol: {
    xs: {span: 24},
    sm: {span: 14},
  },
};

class FindPd extends Component {
  constructor(props) {
    super(props);
    this.state = {
      current: 'mail'
    };
    console.log("this.props", this.props);
  }

  handleSubmit() {

  };

  render() {
    const {getFieldDecorator} = this.props.form;
    return (
      <Layout className="layout" style={{minWidth: '1024px', background: 'white'}}>
        <HeaderMin/>
        <div>
          <Row span={24} style={{zIndex: 1} }>
              <img width='100%' src={bg_register} alt="1"/>
          </Row>

          <Row type="flex" justify="center" className={styles.inner_full_bg} style={{marginTop: '-3%',width:'100%'}}>
            <Col span={10} style={{background: 'white', border: '1px solid #c4c5a6', padding: '2.5%', marginTop: '3%'}}>

              <Form onSubmit={this.handleSubmit} className="login-form">

                <FormItem
                  {...formItemLayout}
                  label={<b>手机号码：</b>}
                  hasFeedback
                >
                  {getFieldDecorator('account', {
                    rules: [{
                      required: true, message: '请填写手机号码',
                    }],
                  })(
                    <Input prefix={<Icon type="user" style={{fontSize: 13}}/>} placeholder="请填写充值账号"/>
                  )}
                </FormItem>

                <FormItem
                  {...formItemLayout}
                  label={<b>短信验证码：</b>}

                  hasFeedback
                >
                  {getFieldDecorator('accountDouble', {
                    rules: [{
                      required: true, message: '请输入短信验证码',
                    }],
                  })(
                    <Input addonAfter={<Button>获取验证码</Button>} prefix={<Icon type="user" style={{fontSize: 13}}/> }
                           placeholder="请输入短信验证码"/>
                  )}
                </FormItem>

                <FormItem
                  {...formItemLayout}
                  label={<b>设置密码：</b>}
                  hasFeedback
                >
                  {getFieldDecorator('payType', {
                    rules: [{
                      required: true, message: '请输密码',
                    }],
                  })(
                    <Input prefix={<Icon type="user" style={{fontSize: 13}}/>} placeholder="请输密码"/>
                  )}
                </FormItem>

                <FormItem
                  {...formItemLayout}
                  label={<b>确认密码：</b>}
                  hasFeedback
                >
                  {getFieldDecorator('payType', {
                    rules: [{
                      required: true, message: '请确认密码',
                    }],
                  })(
                    <Input prefix={<Icon type="user" style={{fontSize: 13}}/>} placeholder="请再次输入密码"/>
                  )}
                </FormItem>

                <FormItem
                  {...formItemLayout}
                  label={<b>验证码：</b>}

                  hasFeedback
                >
                  {getFieldDecorator('accountDouble', {
                    rules: [{
                      required: true, message: '请输入短信验证码',
                    }],
                  })(
                    <Input addonAfter={<Button >dfdfdfdfdf</Button>} prefix={<Icon type="user" style={{fontSize: 13}}/> }
                           placeholder="请输入短信验证码"/>
                  )}
                </FormItem>
                <FormItem style={{textAlign: 'center',marginTop:'2%'}}>
                  <Button
                    type="primary"
                    htmlType="submit"
                    style={{width: '25%'}}
                  >
                    确定提交
                  </Button>
                </FormItem>
              </Form>
            </Col>
          </Row>
        </div>
        <Row style={{marginTop:'1%'}}>
          <FooterMin />
        </Row>

      </Layout>
    );
  }
}
export default Form.create()(FindPd);
